<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人资料</title>
    <link rel="stylesheet" href="../css/personalData.css">
    <link rel="stylesheet" type="text/css" href="../css/head_style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/left_style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/foot_style.css"/>
    <link rel="stylesheet" href="../js/layui-v2.2.6/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../css/fontCss.css"/>
    <script src="../js/layui-v2.2.6/layui/layui.js"></script>
</head>
<body>
<!--头部-->
<div class="head">
    <div class="head1 ">
        <img class="img" src="../img/top1.png" alt="汇网" width="50" height="50"/>
        <div class="head-search layui-form">
            <i class="layui-icon layui-icon-face-smile search-icon">&#xe615;</i>
            <div class="layui-input-inline head-search-input">
                <select name="modules" lay-verify="required" lay-search="">
                    <option value="">寻找人才</option>
                    <option value="1">人才1号</option>
                </select>
            </div>
        </div>

        <div class="layui-btn layui-btn-sm fabu-btn">发&nbsp;&nbsp;布</div>
        <div class="btns">
					<span class="language-btns" >
						中文
						<i class="layui-icon layui-icon-face-smile language-icon">&#xe61a;</i>
					&nbsp;&nbsp;&nbsp;
						<div class="span-div">
							<p class="cn">中文</p>
								<hr/>
								<p class="eng">English</p>
						</div>
					</span>
            <span>&nbsp;&nbsp;&nbsp;</span>
            <div class="img-userhead">
                <img src="../img/1/10.png" width="32" height="32" style="border-radius: 16px;;" /><!--头像-->
                <!--<span class="login-btn">登录</span>
                <span>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>
                <span class="register-btn">注册</span>-->
                <span class="user-btn">Manty
							<i class="layui-icon layui-icon-face-smile user-icon" style="font-size: 14px;">&#xe61a;</i>
						</span>
                <div class="userbox">
                    <div class="userbox-user">
                        <img src="../img/1/10.png"/>
                        <span class="userbox-usename">Manty</span>
                        <span class="userbox-usertype">个人用户</span>
                    </div>
                    <div class="userbox-set">
                        <i class="iconfont " style="font-size: 14px;color: #333333;">&#xe606;</i>
                        &nbsp;&nbsp;&nbsp;设置
                    </div>
                    <div class="userbox-out">
                        <i class="iconfont " style="font-size: 14px;color: #333333;">&#xe652;</i>
                        &nbsp;&nbsp;&nbsp;安全退出
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--导航-->
<div class="nav">
    <div class="nav1">
        <ul>
            <li>首&nbsp;&nbsp;&nbsp;&nbsp;页</li>
            <li>供需大厅</li>
            <li>产品说明</li>
            <li>关于我们</li>
            <li>帮助中心</li>
        </ul>
    </div>
</div>
<div class="container">
    <!-- 左侧 -->
    <div class="left">
        <div class="left-nav">
            <div class="left-userhead">
                <img src="../img/1/10.png"/>
            </div>
            <div class="left-username">
                Manty
            </div>
            <!--发布需求-->
            <div class="left-demand left-btn-style" style="margin-top:20px ;">
                <i class="iconfont">&#xe75e;</i>
                <span class="">发布需求</span>
            </div>
            <!--发布历史-->
            <div class="left-history left-btn-style">
                <i class="iconfont">&#xe75f;</i>
                <span class="">发布历史</span>
            </div>
            <!--交易记录-->
            <div class="left-record left-btn-style">
                <i class="iconfont">&#xe762;</i>
                <span class="">交易记录</span>
            </div>
            <!--我的资料-->
            <div class="left-data left-btn-style">
                <i class="iconfont">&#xe760;</i>
                <span class="">我的资料</span>
            </div>
            <!--修改密码-->
            <div class="left-password left-btn-style">
                <i class="iconfont">&#xe762;</i>
                <span class="">修改密码</span>
            </div>
            <!--签到-->
            <div class="left-sign">
                <span class="left-sign-span">已连续签到2天</span>
                <div class="left-sign-btn">签到</div>
            </div>
        </div>
    </div>
    <!-- 主体 -->
    <div class="main">
        <div class="head-img">
        	<div class="head-box">
        		<img src="../img/defaultHeadImg.png"/>
        	</div>
        	
        </div>
        <div class="wrap">
            <div class="title">
                <p>基本资料</p>
            </div>
            <div class="base">
                <form class="layui-form layui-form-pane">
                    <div class="layui-form-item">
                        <button type="button" class="layui-btn">保存</button>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label for="userName" class="req">用户名</label>
                        <div class="layui-input-block">
                            <input type="text" id="userName" class="layui-input tiput" placeholder="请输入用户名">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label for="birthday" class="req">出生年月日</label>
                        <div class="layui-input-inline">
                            <select name="year" id="birthday">
                                <option value="">2018</option>
                                <option value="">2019</option>
                                <option value="">2020</option>
                            </select>
                        </div>

                        <div class="layui-input-inline">
                            <select name="month">
                                <option value="">月</option>
                                <option value="">1</option>
                                <option value="">2</option>
                                <option value="">3</option>
                                <option value="">4</option>
                                <option value="">5</option>
                            </select>
                        </div>

                        <div class="layui-input-inline">
                            <select name="day">
                                <option value="">日</option>
                                <option value="">1</option>
                                <option value="">2</option>
                                <option value="">3</option>
                                <option value="">4</option>
                                <option value="">5</option>
                            </select>
                        </div>
                    </div>


                    <div class="layui-form-item item2-wrap">
                        <label for="lang" class="req">可通讯语言种类及水平</label>
                        <div class="item2-box">
                            <div class="layui-input-inline item2">
                                    <select name="lang" id="lang">
                                        <option value="">请选择语种</option>
                                        <option value="">中文</option>
                                    </select>
                                </div>

                            <div class="layui-input-inline item2">
                                    <select name="">
                                        <option value="">请选择语种</option>
                                    </select>
                            </div>
                        </div>
                        <i class="iconfont plus-btn">&#xe601;</i>
                    </div>


                    <div class="layui-form-item">
                        <label for="nationality" class="req">本人出生地</label>
                        <div class="layui-input-inline">
                            <select name="nationality" id="nationality">
                                <option value="">国籍</option>
                                <option value="">中国</option>
                                <option value="">美国</option>
                                <option value="">俄罗斯</option>
                            </select>
                        </div>

                        <div class="layui-input-inline">
                                <select name="">
                                    <option value="">省</option>
                                </select>
                            </div>

                        <div class="layui-input-inline">
                                <select name="">
                                    <option value="">市</option>
                                </select>
                            </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="req">本人现有国籍</label>
                        <div class="layui-input-inline">
                                <select name="" >
                                    <option value="">国籍</option>
                                    <option value="">中国</option>
                                    <option value="">美国</option>
                                    <option value="">俄罗斯</option>
                                </select>
                            </div>

                        <div class="layui-input-inline">
                            <select name="">
                                <option value="">省</option>
                            </select>
                            </div>

                        <div class="layui-input-inline">
                            <select name="">
                                <option value="">省</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="req">县居住城市</label>
                        <div class="layui-input-inline">
                            <select name="nationality">
                                <option value="">国籍</option>
                                <option value="">中国</option>
                                <option value="">美国</option>
                                <option value="">俄罗斯</option>
                            </select>
                        </div>

                        <div class="layui-input-inline">
                            <select name="">
                                <option value="">省</option>
                            </select>
                        </div>

                        <div class="layui-input-inline">
                            <select name="">
                                <option value="">市</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label>职业</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input tiput" placeholder="我从事的职业标签">
                        </div>
                    </div>

                </form>
            </div>

            <div class="title">
                <p>联系方式</p>
            </div>
            <div class="contact">
                <form class="layui-form layui-form-pane">
                    <div class="layui-form-item">
                        <button type="button" class="layui-btn" id="contact-btn">保存</button>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="req">邮箱</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" placeholder="user@example.com">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="req">电话</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" placeholder="我的手机或座机号">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div></div>
                        <div class="layui-inline">
                            <label>网站</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" placeholder="我自己的网站">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label>公众号</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" placeholder="我自己的公众号">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <div class="click-upload" id="up-ewm">
                                <p>点击上传<br/>我的微信二维码</p>
                            </div>
                        </div>
                        <div class="account">
                            <div class="layui-inline">
                                <label>微信</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" placeholder="我的微信号或绑定的手机号">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label>Facebook</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" placeholder="我的Facebook账号">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label>WhatsApp</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" placeholder="我的WhatsApp">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label>LikedIn</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" placeholder="我的LikedIn">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item item2-wrap">
                        <label>其他即使通信方式（例，QQ：1656269536）</label>
                        <div class="item2-box">
                            <div class="layui-input-inline item2" style="width: 195px;">
                                <input type="text" class="layui-input" placeholder="请填写即时通信种类">
                            </div>
                            <div class="layui-form-mid">：</div>
                            <div class="layui-input-inline" style="width: 434px;">
                                <input type="text" class="layui-input" placeholder="请填写该通信方式的账号">
                            </div>
                        </div>
                        <i class="iconfont plus-btn">&#xe601;</i>
                    </div>

                    <div class="layui-form-item item2-wrap">
                        <label>展示照片（最多上传六张）</label>
                        <div></div>
                        <div class="preview" id="preview"></div>
                        <button type="button" id="upload-btn" class="layui-btn">+</button>

                    </div>

                </form>
            </div>

            <div class="title">
                <p>相关证件</p>
            </div>
            <div class="certificates">
                <form class="layui-form layui-form-pane">
                    <div class="layui-form-item">
                        <label>身份证或外国人许可证正反面照片 <a href="###" class="upload-a">我要上传护照</a></label>
                        <div class="layui-inline">
                            <div class="layui-input-inline" id="up-face">
                                <div class="msg-box">
                                    <p><i class="layui-icon" style="font-size: 56px">&#xe654;</i></p>
                                    <p class="cer-msg">上传身份证(人脸面)</p>
                                </div>
                            </div>
                            <div class="layui-input-inline" id="up-badge">
                                <div class="msg-box">
                                    <p><i class="layui-icon" style="font-size: 56px">&#xe654;</i></p>
                                    <p class="cer-msg">上传身份证(国徽面)</p>
                                </div>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <div class="example">
                                <p>证件照正反面实例：</p>
                                <div><img src="../img/z.png"/></div>
                                <div><img src="../img/f.png"/></div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label style="float: left;width: 255px">手持证件照</label>
                        <label style="float: left;">手持证件照</label>
                        <div class="layui-inline" style="float: left;clear: both">
                            <div class="layui-input-inline" id="up-take">
                                <div class="msg-box">
                                    <p><i class="layui-icon" style="font-size: 56px">&#xe654;</i></p>
                                    <p class="cer-msg">上传手持身份证(</p>
                                </div>
                            </div>
                        </div>

                        <div class="layui-inline" style="float: left;">
                            <img src="../img/s.jpg" class="sc">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label style="float: left;width: 340px">真实姓名</label>
                        <label style="float: left;">身份证号</label>
                        <div class="layui-clear"></div>
                        <input type="text" class="layui-input" placeholder="我的真实姓名" style="width: 315px;float:left;margin-right: 27px">
                        <input type="text" class="layui-input" placeholder="请输入正确的身份号" style="width: 315px;;float:left;">
                    </div>

                    <div class="layui-form-item">
                        <button type="button" class="layui-btn" id="save">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 尾部版权 -->
<div>
    <div class="foot">
        <div class="foot1">
            Copyright © 2018 世界汇网  www.thewiorldwie.cn
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['form', 'layedit', 'laydate','upload'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate
            ,$ = layui.jquery
            ,upload = layui.upload;

         $(".language-btns").click(function(){
                if(!$(".span-div").is(':hidden')){//如果当前不隐藏
                    $('.span-div').hide();//就隐藏div
                    $(".language-icon").html("&#xe61a;")
                }else{//否则
					$('.userbox').hide();//就隐藏div
					$(".user-icon").html("&#xe61a;")
                    $('.span-div').show();//那么就显示div
                    $(".language-icon").html("&#xe619;")
                }
            })

            $(".user-btn").click(function(){
                if(!$(".userbox").is(':hidden')){//如果当前不隐藏
                    $('.userbox').hide();//就隐藏div
                    $(".user-icon").html("&#xe61a;")
                }else{//否则
 					$('.span-div').hide();//就隐藏div
 					$(".language-icon").html("&#xe61a;")
                    $('.userbox').show();//那么就显示div
                    $(".user-icon").html("&#xe619;")
                }
            });

        // 添加按钮
        $('.plus-btn').click(function (e) {
            var target = $(e.target);
                item2Wrap = $(target.parent()),
                item2Box = $(target.prev()),
                dom = item2Box.clone()
                    .attr("class","layui-form")
                    .attr("lay-filter","dom")
                    .attr("style","clear:both");

            dom.find("input").val('');

            item2Wrap.append(dom);
            form.render('select', "dom");
            dom.removeAttr("class").removeAttr("lay-filter");
            return false;
        });

        var uploadUrl = "/text/xxx";

        //展示照片上传
        var uploadList = upload.render({
            elem: '#upload-btn'
            ,url: uploadUrl
            ,method: "post"
            ,auto: false
            ,bindAction: "#contact-btn"
            ,accept: "images"
            ,multiple: true
            ,number: 6
            ,choose: function(obj){
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                console.log(files);
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    var pre = $('<img src="' + result + '">');
                    var preBoxCloe = $("<i class='iconfont pre-box-close'>&#xe638;</i>");
                    var preBox = $('<div class="pre-box">').append(pre).append(preBoxCloe);
                    $('#preview').append(preBox);

                    preBoxCloe.click(function (e) {
                        var target = $(e.target),
                            box = $(target.parent());

                        delete files[index]; //删除对应的文件
                        box.remove();
                        uploadList.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        if(le >= 6) {
                            $("#upload-btn").show();
                        }

                        console.log(files);
                    });

                    var le = $(".preview img").length;
                    if(le >= 6){
                        $("#upload-btn").hide();
                    }

                });


            }
            ,done: function(res){
                //上传完毕
            }
            ,error: function (index, upload) {
                // 文件上传错误
            }
        });




        var uploadIdCard = function (el, url,prevBox,subBtn) {
            upload.render({
                elem: el,
                url: url,
                method: 'POST',
                auto: false,
                bindAction: subBtn || "#save",
                accept: "images",
                multiple: false,
                number: 1,
                choose: function(obj) {
                    obj.preview(function(index, file, result){
                        var box = $(prevBox).empty().attr('title','替换照片');
                        var pre = $('<img src="' + result + '">');
                        box.append(pre);

                    })
                },
                done: function (response) {

                },
                error: function (index, upload) {
                }
            });
        }

        // 人脸面
        uploadIdCard('#up-face', uploadUrl, '#up-face');
        // 国徽面
        uploadIdCard('#up-badge', uploadUrl, '#up-badge');
        // 手持面
        uploadIdCard('#up-take', uploadUrl, '#up-take');
        // 二维码
        uploadIdCard('#up-ewm', uploadUrl, '#up-ewm', '#contact-btn');
        // 上传头像
        uploadIdCard('.head-box', uploadUrl, '.head-box');

    })
</script>
</body>
</html>